/**
 *
 */
var DrawingManager;//创建命名空间
if(!DrawingManager) DrawingManager = {};
DrawingManager.mode = {//默认模式
    strokeColor : "red",
    fillColor : "red",
    strokeWidth : 3,        //边框宽度，固定
    strokeOpacity : 0.8,    //边框透明度，固定
    fillOpacity : 0.6,      //填充透明度，固定
    strokeStyle : "solid",  //边框样式，固定
};
//指定画布
DrawingManager.setCanvas = function(element){
    e = document.getElementById("mapCanvas");
    DrawingManager.cvs_ctx = e.getContext("2d");
    DrawingManager.cvs_Bounding = e.getBoundingClientRect();
};
//轮廓样式
DrawingManager.useStrokeCss = function(color){
    if(!DrawingManager.cvs_ctx){
        alert("未指定画布");
        return
    }
    var ctx = DrawingManager.cvs_ctx;
    ctx.globalAlpha = this.mode.strokeOpacity;
    ctx.strokeStyle = color || this.mode.strokeColor;
};

//图形填充样式
DrawingManager.useFillCss = function(color){
    if(!DrawingManager.cvs_ctx){
        alert("未指定画布");
        return
    }
    var ctx = DrawingManager.cvs_ctx;
    ctx.lineWidth = this.mode.strokeWidth;
    ctx.fillStyle = color||this.mode.fillColor;
    ctx.globalAlpha = this.mode.fillOpacity;
};
//绘制矩形
DrawingManager.drawrect = function(x,y,w,h,color){
    if(!DrawingManager.cvs_ctx){
        alert("未指定画布");
        return
    }
    var ctx = DrawingManager.cvs_ctx;
    this.useFillCss();
    ctx.fillRect(x,y,w,h);
    this.useStrokeCss();
    ctx.strokeRect(x,y,w,h);
};
//绘制提示点
DrawingManager.drawtip = function(x,y,color){
    if(!DrawingManager.cvs_ctx){
        alert("未指定画布");
        return
    }
    var ctx = DrawingManager.cvs_ctx;
    var ctx_b = DrawingManager.cvs_Bounding;

    var tip_w = 5;
    var tip_h = 5;
    var startpoint = {};
    startpoint.x = x - tip_w/2;
    startpoint.y = y - tip_h/2;
    if(startpoint.x < 0)
        startpoint.x = 0;
    if(startpoint.y < 0)
        startpoint.y = 0;

    var stoppoint = {};
    stoppoint.x = x + tip_w/2;
    stoppoint.y = y + tip_h/2;
    if(stoppoint.x > ctx_b.width)
        stoppoint.x = ctx_b.width;
    if(stoppoint.y > ctx_b.height)
        stoppoint.y = ctx_b.height;
    ctx.lineWidth = 2;
    ctx.fillStyle = color||this.mode.fillColor;
    ctx.globalAlpha = 1;
    ctx.strokeStyle = color || this.mode.strokeColor;
    ctx.strokeRect(startpoint.x,startpoint.y,stoppoint.x-startpoint.x,stoppoint.y-startpoint.y);
};

DrawingManager.g_point = new Array(2);

DrawingManager.drawFirstRectPoint = function(x,y){
    if(DrawingManager.shapetype != 1)
        return;
    if(!DrawingManager.cvs_ctx){
        alert("未指定画布");
        return
    }
    var ctx_b = DrawingManager.cvs_Bounding;

    var point = DrawingManager.g_point;
    var drawx = x - ctx_b.left;//相对流量器的坐标
    var drawy = y - ctx_b.top;
    point[0] = {x:drawx,y:drawy};
    DrawingManager.drawtip(point[0].x,point[0].y,"blue");//相对画布的坐标
};
DrawingManager.drawLastRectPoint = function(x,y) {
    if(DrawingManager.shapetype != 1)
        return;
    if(!DrawingManager.cvs_ctx){
        alert("未指定画布");
        return
    }
    var ctx_b = DrawingManager.cvs_Bounding;

    var point = DrawingManager.g_point;
    var drawx = x - ctx_b.left;
    var drawy = y - ctx_b.top;
    point[1] = {x:drawx,y:drawy};
    var w = Math.abs(drawx-point[0].x);
    var h = Math.abs(drawy-point[0].y);
    DrawingManager.drawtip(point[1].x,point[1].y,"blue");
    DrawingManager.drawrect(point[0].x<point[1].x?point[0].x:point[1].x,
        point[0].y<point[1].y?point[0].y:point[1].y,w,h,"red");
};

DrawingManager.regin = [];
//绘制多边形
DrawingManager.drawPolygonAddpoint = function(x,y){
    var ctx_b = DrawingManager.cvs_Bounding;
    var drawx = x - ctx_b.left;
    var drawy = y - ctx_b.top;
    var point = {x:x,y:y};
    this.drawTempshape(2,point);
};

//展示图形

//临时展示图形
//输入，客户端坐标
DrawingManager.shapetype = 0;
DrawingManager.drawTempshape = function(shapetype,x,y){
    var ctx = DrawingManager.cvs_ctx;
    var ctx_b = DrawingManager.cvs_Bounding;
    var ob_data = this.regin;
    //坐标转换成画布坐标
    var newpoint = {};
    newpoint.x = x - ctx_b.left;
    newpoint.y = y - ctx_b.top;
    this.drawtip(newpoint.x,newpoint.y,"blue");
    this.useStrokeCss();
    shapetype = DrawingManager.shapetype;
    switch (shapetype) {
        case 1://矩形
            if(ob_data.length == 1){
                ob_data[1] = newpoint;
                var w = Math.abs(ob_data[1].x-ob_data[0].x);
                var h = Math.abs(ob_data[1].y-ob_data[0].y);
                DrawingManager.drawrect(ob_data[0].x<ob_data[1].x?ob_data[0].x:ob_data[1].x,
                    ob_data[0].y<ob_data[1].y?ob_data[0].y:ob_data[1].y,w,h,"red");
            }//加点
            break;
        case 2://多边形
            ob_data[ob_data.length] = newpoint;
            if(ob_data.length == 1){//绘制第一个点
                ctx.beginPath();
                ctx.moveTo(ob_data[0].x, ob_data[0].y);
            }
            if(ob_data.length > 1) {
                ctx.lineTo(ob_data[ob_data.length - 1].x, ob_data[ob_data.length - 1].y);
                ctx.stroke();
            }
            break;
        case 3://折线
            break;
    }
};
DrawingManager.drawPolygondone = function(){
    if((this.shapetype != 2 )|| (this.regin.length < 3))
        return;
    if(!DrawingManager.cvs_ctx){
        alert("未指定画布");
        return
    }
    var ctx = DrawingManager.cvs_ctx;
    var ctx_b = DrawingManager.cvs_Bounding;

    var lastpoint = this.regin[this.regin.length-1];
    var firstpoint = this.regin[0];
    ctx.moveTo(lastpoint.x,lastpoint.y);
    ctx.lineTo(firstpoint.x,firstpoint.y);
    ctx.closePath();
    this.useStrokeCss();
    this.useFillCss();
    ctx.stroke();
    ctx.fill();
    this.regin.length = 0;
};